<!DOCTYPE html>
<html class="layui-bg-white">
<head th:include="include :: header"></head>
<body>
<div th:include="include :: footer"></div>
<div class="layui-form" style="padding:20px;" id="imageViewer">
    <input type="hidden" id="id" name="id" th:value="${choiceQuestion.id}">
    <input id="clearField" name="clearField" value="clearField" type="hidden">
    <input type="hidden" id="subjectName" name="subjectName" th:value="${choiceQuestion.subjectName}">
    <input type="hidden" id="choiceOption" name="choiceOption" th:value="${choiceQuestion.choiceOption}">
    <div class="layui-form-item">
        <label class="layui-form-label"><span class="required">*</span>科目：</label>
        <div class="layui-input-block">
            <select lay-filter="subjectId" id="subjectId" name="subjectId" class="form-control chosen-select" lay-search lay-verify="required">
                <option value="">--请选择--</option>
                <option th:each="item : ${subject}" th:value="${item.id}" th:text="${item.name}" th:selected="${item.id==choiceQuestion.subjectId}"></option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><span class="required">*</span>题号：</label>
        <div class="layui-input-block">
            <input type="text" name="sortNumber" lay-verify="required" placeholder="请输入题号" autocomplete="off" class="layui-input" th:value="${choiceQuestion.sortNumber}">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><span class="required">*</span>题目：</label>
        <div class="layui-input-block">
            <textarea name="name" lay-verify="required" placeholder="请输入题目" autocomplete="off" class="layui-textarea" th:text="${choiceQuestion.name}"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">题目照片：</label>
        <div class="layui-input-block">
            <seqb:upload-images domainName="ChoiceQuestion" domainField="Attachment" domainId="${choiceQuestion.id}"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><span class="required">*</span>题目选项：</label>
        <div class="layui-input-block">
            <input type="radio" name="optionType" value="1" lay-filter="optionType" title="文本" th:checked="${choiceQuestion.optionType=='1'}">
            <input type="radio" name="optionType" value="2" lay-filter="optionType" title="1张图片含1个选项" th:checked="${choiceQuestion.optionType=='2'}">
            <input type="radio" name="optionType" value="3" lay-filter="optionType" title="1张图片含所有选项" th:checked="${choiceQuestion.optionType=='3'}">
            <button class="layui-btn layui-btn-sm layui-btn-normal" style="margin-top:6px;" onclick="choiceQuestion.choiceOptionAdd();">
                <i class="layui-icon"></i>添加
            </button>
        </div>
    </div>
    <!--文本、1张图片含1个选项、1张图片含所有选项-->
    <div class="choiceOptionDiv"></div>
    <div class="layui-form-item layui-row">
        <div class="layui-col-md6">
            <label class="layui-form-label"><span class="required">*</span>类型：</label>
            <div class="layui-input-block">
                <input type="radio" name="type" th:each="item:${choice}" th:value="${item.value}" th:title="${item.name}" th:checked="${item.value==choiceQuestion.type}">
            </div>
        </div>
        <div class="layui-col-md6">
            <label class="layui-form-label">正确答案：</label>
            <div class="layui-input-block">
                <input type="text" name="answer" placeholder="请输入答案正确" autocomplete="off" class="layui-input" th:value="${choiceQuestion.answer}">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">答案解析：</label>
        <div class="layui-input-block">
            <textarea id="answerAnalysis" name="answerAnalysis" th:text="${choiceQuestion.answerAnalysis}"></textarea>
        </div>
    </div>
    <div class="layui-form-item layui-hide">
        <input type="button" lay-submit lay-filter="LAY-operate-submit" id="LAY-operate-submit" value="确认">
    </div>
</div>
<script type="text/javascript">
    var choiceQuestion = {};
    layui.config({
        base: ctx + '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index',         //主入口模块
        viewer: 'viewer'
    }).use(['index', 'form', 'layedit', 'upload', 'viewer'], function (exports) {
        var $ = layui.$, form = layui.form, layedit = layui.layedit, upload = layui.upload;
        var optionType = $("input[name='optionType']:checked").val();

        //科目
        form.on('select(subjectId)', function (data) {
            var value = data.value || '';
            var text = '';
            if (value != '') {
                text = data.elem[data.elem.selectedIndex].text || '';
            }
            $('#subjectName').val(text);
        });

        //题目选项切换 radio
        form.on('radio(optionType)', function (data) {
            optionType = data.value;
            $('.choiceOptionDiv').empty();
            choiceQuestion.choiceOptionAdd();
        });

        //题目选项添加
        choiceQuestion.choiceOptionAdd = function (optionIndex, optionValue) {
            var serialNumber = commonJs.getSerialNumber();
            optionIndex = optionIndex || '';
            if (optionType != '1') {
                optionValue = optionValue || '/custom/images/upload.png';
            } else {
                optionValue = optionValue || '';
            }
            var htmlContent1 = ' <div class="layui-row layui-form-item choiceOptionItem">\n' +
                '            <div class="layui-col-sm2">\n' +
                '                <div class="layui-input-block">\n' +
                '                    <input type="text" placeholder="例如：A" autocomplete="off" class="layui-input option-index" value="' + optionIndex + '">\n' +
                '                </div>\n' +
                '            </div>\n' +
                '            <div class="layui-col-sm9">\n' +
                '                <div class="layui-input-block">\n' +
                '                    <input type="text" placeholder="请输入选项内容" autocomplete="off" class="layui-input option-value" value="' + optionValue + '">\n' +
                '                </div>\n' +
                '            </div>\n' +
                '            <div class="layui-col-sm1" style="text-align:right;margin-top:3px;">\n' +
                '                <button class="layui-btn layui-btn-sm layui-btn-danger" onclick="choiceQuestion.choiceOptionDel(this)"><i class="layui-icon"></i>删除</button>\n' +
                '            </div>\n' +
                '        </div>';

            var htmlContent2 = '<div class="layui-row layui-form-item choiceOptionItem">\n' +
                '            <div class="layui-col-sm2">\n' +
                '                <div class="layui-input-block">\n' +
                '                    <input type="text" placeholder="例如：A" autocomplete="off" class="layui-input option-index" value="' + optionIndex + '">\n' +
                '                </div>\n' +
                '            </div>\n' +
                '            <div class="layui-col-sm9">\n' +
                '                <div class="layui-input-block">\n' +
                '                    <div class="thumbnail">\n' +
                '                        <img style="cursor:pointer;" src="' + ctx + optionValue + '">\n' +
                '                        <input type="hidden" class="layui-input option-value" value="' + optionValue + '">\n' +
                '                        <div class="caption text-center">\n' +
                '                            <p>\n' +
                '                                <button id="' + serialNumber + '" type="button" class="layui-btn layui-btn-sm layui-btn-normal"><i class="layui-icon"></i>上传图片</button>\n' +
                '                            </p>\n' +
                '                        </div>\n' +
                '                    </div>\n' +
                '                </div>\n' +
                '            </div>\n' +
                '            <div class="layui-col-sm1" style="text-align:right;margin-top:3px;">\n' +
                '                <button class="layui-btn layui-btn-sm layui-btn-danger" onclick="choiceQuestion.choiceOptionDel(this)"><i class="layui-icon"></i>删除</button>\n' +
                '            </div>\n' +
                '        </div>';

            var htmlContent3 = '<div class="layui-row layui-form-item choiceOptionItem">\n' +
                '            <div class="layui-col-sm11">\n' +
                '                <div class="layui-input-block">\n' +
                '                    <div class="thumbnail">\n' +
                '                        <img style="cursor:pointer;" src="' + ctx + optionValue + '">\n' +
                '                        <input type="hidden" class="layui-input option-index" value="option">\n' +
                '                        <input type="hidden" class="layui-input option-value" value="' + optionValue + '">\n' +
                '                        <div class="caption text-center">\n' +
                '                            <p>\n' +
                '                                <button id="' + serialNumber + '" type="button" class="layui-btn layui-btn-sm layui-btn-normal"><i class="layui-icon"></i>上传图片</button>\n' +
                '                            </p>\n' +
                '                        </div>\n' +
                '                    </div>\n' +
                '                </div>\n' +
                '            </div>\n' +
                '            <div class="layui-col-sm1" style="text-align:right;margin-top:3px;">\n' +
                '                <button class="layui-btn layui-btn-sm layui-btn-danger" onclick="choiceQuestion.choiceOptionDel(this)"><i class="layui-icon"></i>删除</button>\n' +
                '            </div>\n' +
                '        </div>';

            if (optionType == '1') {
                $('.choiceOptionDiv').append(htmlContent1);
            } else if (optionType == '2') {
                $('.choiceOptionDiv').append(htmlContent2);
                choiceQuestion.choiceOptionUpload(serialNumber);
            } else if (optionType == '3') {
                $('.choiceOptionDiv').append(htmlContent3);
                choiceQuestion.choiceOptionUpload(serialNumber);
            }
        };

        //题目选项删除
        choiceQuestion.choiceOptionDel = function (target) {
            $(target).parents('.choiceOptionItem').remove();
        };

        //题目选项上传
        choiceQuestion.choiceOptionUpload = function (target) {
            upload.render({
                elem: '#' + target, //绑定元素
                url: ctx + '/manage/file/file/upload', //上传接口
                accept: 'file',
                done: function (result) {
                    commonJs.openMsg('success', result.msg, function () {
                        $('#' + target).parents('.choiceOptionItem').find('img').attr('src', ctx + result.fileUrl);
                        $('#' + target).parents('.choiceOptionItem').find('.option-value').val(result.fileUrl);
                    });
                },
                error: function (result) {
                    commonJs.openMsg('error', result.msg);
                }
            });
        };

        //解析题目选项数据
        var choiceOption = JSON.parse($('#choiceOption').val() || '{}');
        if (!$.isEmptyObject(choiceOption)) {
            if (null != choiceOption['A']) {
                choiceQuestion.choiceOptionAdd('A', choiceOption['A']);
            }
            if (null != choiceOption['B']) {
                choiceQuestion.choiceOptionAdd('B', choiceOption['B']);
            }
            if (null != choiceOption['C']) {
                choiceQuestion.choiceOptionAdd('C', choiceOption['C']);
            }
            if (null != choiceOption['D']) {
                choiceQuestion.choiceOptionAdd('D', choiceOption['D']);
            }
            if (null != choiceOption['option']) {
                choiceQuestion.choiceOptionAdd('option', choiceOption['option']);
            }
        } else {
            choiceQuestion.choiceOptionAdd();
        }

        //获取题目选项数据
        choiceQuestion.choiceOptionValue = function () {
            var choiceOption = {};
            $(".choiceOptionItem").each(function () {
                var index = $(this).find('.option-index').val() || '';
                var value = $(this).find('.option-value').val() || '';
                if (index != '' && value != '') {
                    choiceOption[index] = value;
                }
            });
            $('#choiceOption').val(JSON.stringify(choiceOption));
        };

        //初始和获取富文本的内容
        layedit.set({
            uploadImage: {
                url: ctx + '/manage/file/file/layedit' //接口url
            }
        });
        var layeditIndex = layedit.build('answerAnalysis');

        choiceQuestion.layeditContent = function () {
            var content = layedit.getContent(layeditIndex);
            $('#answerAnalysis').val(content);
        };

        //表单校验
        form.verify(commonJs.form.verify);

        //题目图片预览 viewer
        new Viewer(document.getElementById('imageViewer'));

        //初始化form的数据
        choiceQuestion.initFormData = function () {
            choiceQuestion.layeditContent();
            choiceQuestion.choiceOptionValue();
        }
    });
</script>
</body>
</html>